<template>
	<view class="flex-col homepage">
		<text v-if="succeed" class="icon-checkbox-mark">
			<u-icon class="icon-checkbox-mark" name="checkbox-mark" style="padding-left: 20px;"></u-icon>
			<view class="u-line-1 text">预约成功</view>
		</text>
		<text v-if="lose" class="icon-checkbox-mark">
			<u-icon class="icon-checkbox-mark" name="close" style="padding-left: 20px;"></u-icon>
			<view class="u-line-1 text">已取消</view>
		</text>
		<view class="flex-col wrapper">
			<view class="flex-row wraper-row" v-if="isopen">
				<u-avatar class="avatar" :src="avatar" :size="90"></u-avatar>
				<view class="u-line-1 text-two" v-if="!!message.doctor">{{message.doctor.doctorName}}</view>
				<view class="u-line-1 text-three" v-if="!!message.doctor">{{message.doctor.jobTitle}}</view>
			</view>
			<u-line class="line" margin="0rpx 0rpx 30rpx 4rpx"></u-line>
			<view class="flex-row wraper-row-two">
				<view class="u-line-1 text-four">就诊医院</view>
				<view class="u-line-1 text-five" v-if="!!message.campus">{{message.campus.campusName}}</view>
			</view>
			<u-line class="line" margin="0rpx 0rpx 30rpx 4rpx"></u-line>
			<view class="flex-row wraper-row-three">
				<view class="u-line-1 text-six">医院地址</view>
				<view class="u-line-1 text-seven" v-if="!!message.campus">{{message.campus.campusAddress}}</view>
			</view>
			<u-line class="line-two" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-four">
				<view class="u-line-1 text-eight">就诊科室</view>
				<view class="u-line-1 text-nine" v-if="!!message.divisionType">{{message.divisionType.divisionName}}
				</view>
			</view>
			<u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-five" v-if="isopen">
				<view class="u-line-1 text-ten">门诊时间</view>
				<view class="u-line-1 text-eleven">2020年12月30日 周一 上午</view>
			</view>
			<view class="flex-row wraper-row-five" v-if="isopens">
				<view class="u-line-1 text-ten">预约时间</view>
				<view class="u-line-1 text-eleven">2020年12月30日 周一 上午</view>
			</view>
			<u-line class="line-two" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-six">
				<view class="u-line-1 text-twelve">候诊时间</view>
				<view class="u-line-1 text-thirteen" v-if="!!message.waitingRecord">{{message.waitingRecord.createTime}}
				</view>
			</view>
			<u-line class="line-three" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-seven">
				<view class="u-line-1 text-fourteen">费用</view>
				<view class="flex-row box">
					<u-icon class="icon-rmb" name="rmb" color="#df2020"></u-icon>
					<view class="flex-row box-col">
						<view class="u-line-1 text-fifteen" v-if="!!message.doctor">{{message.doctor.indagation}}</view>
						<view class="u-line-1 text-sixteen">(就诊时支付)</view>
					</view>
				</view>
			</view>
			<u-line class="line-four" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-eight">
				<view class="u-line-1 text-seventeen">预约时间</view>
				<view class="u-line-1 text-eighteen">{{message.createTime}}</view>
			</view>
		</view>
		<view class="flex-col wrapper-two">
			<view class="flex-row wraper-row-nine">
				<view class="u-line-1 text-nineteen">就 诊 人</view>
				<view class="u-line-1 text-twenty" v-if="!!message.thePatient">{{message.thePatient.name}}</view>
			</view>
			<u-line class="line-five" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
			<view class="flex-row wraper-row-ten">
				<view class="u-line-1 text-20">身份证号</view>
				<view class="u-line-1 text-21" v-if="!!message.thePatient">{{message.thePatient.number}}</view>
			</view>
		</view>
		<u-button class="button" v-if="lostReg" @click="cancelReg">
			取消预约
		</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:9000/', //主域名
				message: '',
				avatar: '',
				succeed: true,
				lose: false,
				lostReg: true,
				isopen:true,
				isopens:false
			}
		},
		methods: {

			//取消预约
			cancelReg() {
				console.log(this.message.id)
				const id = this.message.id
				//弹出提示框
				uni.showModal({
					content: '确定取消此次预约吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							console.log(id)
							uni.request({
								url: this.URL + "appointment/appointment/appointment/cancelRegById/" + id,
								method:"GET",
								success: (request) => {
									console.log(request)
									console.log(id)
									if (request.data.code == 20000) {
										uni.navigateTo({
											url:"regRecordView?id="+id
										})
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		},

		onLoad(id) {
			console.log(id)
			uni.request({
				url: this.URL + "appointment/appointment/appointment/regRecordById/" + id.id,
				method: "GET",
				success: (res) => {
					console.log(res)
					if (res.data.code == 20000) {
						this.message = res.data.data.appointment
						this.avatar = this.message.doctor.img
						if (this.message.state == '已取消' || this.message.state == '已完成') {
							this.succeed = false
							this.lose = true
							this.lostReg = false
						}
						console.log(this.message)
					}
				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 36rpx 23rpx 0rpx 23rpx;

		.icon-checkbox-mark {
			display: block;
			margin-right: auto;
			margin-bottom: 30rpx;
			margin-left: auto;
		}

		.text {
			width: 138rpx;
			margin-right: auto;
			margin-bottom: 28rpx;
			margin-left: auto;
			font-size: 32rpx;
			font-weight: 550;
		}

		.wrapper {
			width: 100%;
			margin-bottom: 20rpx;
			padding: 30rpx 0rpx 42rpx 20rpx;
			background: #ffffff;
			font-weight: 400;

			.wraper-row {
				width: 360rpx;
				margin: 0rpx 0rpx 22rpx 10rpx;

				.avatar {
					margin-right: 36rpx;
				}

				.text-two {
					width: 96rpx;
					margin: 22rpx 16rpx 0rpx 0rpx;
					font-size: 32rpx;
				}

				.text-three {
					width: 122rpx;
					margin-top: 26rpx;
					font-size: 24rpx;
				}
			}

			.line {
				width: 654rpx;
			}

			.wraper-row-two {
				width: 582rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-four {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-five {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.wraper-row-three {
				width: 582rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-six {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-seven {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.line-two {
				width: 664rpx;
			}

			.wraper-row-four {
				width: 582rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-eight {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-nine {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.wraper-row-five {
				width: 582rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-ten {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-eleven {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.wraper-row-six {
				width: 582rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-twelve {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-thirteen {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.line-three {
				width: 664rpx;
			}

			.wraper-row-seven {
				width: 496rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-fourteen {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.box {
					width: 348rpx;
					justify-content: space-between;
					padding: 4rpx 102rpx 6rpx 2rpx;
					color: #ffffff;

					.icon-rmb {
						width: 28rpx;
						margin-top: 4rpx;
					}

					.box-col {
						width: 216rpx;

						.text-fifteen {
							width: 56rpx;
							margin-right: -4rpx;
							color: #d41616;
						}

						.text-sixteen {
							width: 164rpx;
							color: #b2bdd6;
						}
					}
				}
			}

			.line-four {
				width: 664rpx;
			}

			.wraper-row-eight {
				width: 582rpx;
				justify-content: space-between;
				margin-left: 10rpx;

				.text-seventeen {
					width: 148rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-eighteen {
					width: 434rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}
		}

		.wrapper-two {
			width: 698rpx;
			margin-bottom: 40rpx;
			padding: 30rpx 19rpx 36rpx 19rpx;
			background: #ffffff;

			.wraper-row-nine {
				width: 248rpx;
				justify-content: space-between;
				margin: 0rpx 0rpx 30rpx 10rpx;

				.text-nineteen {
					width: 132rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-twenty {
					width: 102rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}

			.line-five {
				width: 660rpx;
			}

			.wraper-row-ten {
				width: 450rpx;
				justify-content: space-between;
				margin-left: 10rpx;

				.text-20 {
					width: 132rpx;
					font-size: 32rpx;
					color: #c0c0c0;
				}

				.text-21 {
					width: 304rpx;
					font-size: 32rpx;
					font-weight: 300;
				}
			}
		}

		.button {
			width: 698rpx;
			font-size: 32rpx;
			background: #e4f0ff;
			color: #006eff;
		}
	}
</style>
